<template>
  <div class="container">
    <button class="dianji" @click="openList">点击打开内容列表</button>
    <div
      class="neirong"
      v-if="isListopen"
      :style="{
        width: isFullscreen ? '100%' : '350px',
        height: isFullscreen ? '100%' : '530px',
        left: isFullscreen ? '0' : '5%',
        top: isFullscreen ? '0' : '15%',
      }"
      @mousemove="resize"
      @mouseup="stopResize"
    >
      <div
        class="title"
        :class="{ fullscreen: isFullscreen }"
        :style="{
          width: isFullscreen ? '100%' : '100%', // 宽度与 neirong 一致
        }"
        @mousedown="startDrag"
        @mouseup="upmouse"
        @mousemove="movemouse"
      >
        <div class="tu">
          <div class="tu1"></div>
          <b>当日实时目标列表</b>
        </div>
        <div class="tu">
          <div class="tu2" @click="small"></div>
          <div class="tu3" @click="big"></div>
          <div class="tu4" @click="close"></div>
        </div>
      </div>
      <div
        class="bord"
        :class="{ fullscreen: isFullscreen }"
        :style="{
          height: isMinimized ? '0px' : isFullscreen ? '100%' : '500px',
        }"
      >
        <div v-if="!isMinimized">内容区域</div>
      </div>
      <div class="jiaobiao1" v-if="!isMinimized">
        <img src="../assets/images/dialog/c-tl.png" alt="" />
      </div>
      <div class="jiaobiao2" v-if="!isMinimized">
        <img src="../assets/images/dialog/c-tr.png" alt="" />
      </div>
      <div class="jiaobiao3" v-if="!isMinimized">
        <img src="../assets/images/dialog/c-bl.png" alt="" />
      </div>
      <div class="jiaobiao4" v-if="!isMinimized">
        <img src="../assets/images/dialog/c-br.png" alt="" />
      </div>
      <div
        class="line line-right"
        @mousedown="startResize('right', $event)"
      ></div>
      <div
        class="line line-bottom"
        @mousedown="startResize('bottom', $event)"
      ></div>
      <div
        class="line line-left"
        @mousedown="startResize('left', $event)"
      ></div>
      <div class="line line-top" @mousedown="startResize('top', $event)"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UpData",
  data() {
    return {
      isDrag: false,
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      isListopen: false,
      isMinimized: false,
      isFullscreen: false,
      isResizing: false, // 是否正在调整大小
      resizeDirection: "", // 调整大小的方向（top, left, bottom, right）
      initialWidth: 350, // 初始宽度
      initialHeight: 530, // 初始高度
    };
  },
  methods: {
    startDrag(event) {
      console.log("鼠标按下");
      this.isDrag = true;
      this.startX = event.clientX;
      this.startY = event.clientY;
    },
    upmouse(event) {
      console.log("鼠标松开");
      this.isDrag = false;
      this.endX = event.clientX;
      this.endY = event.clientY;
    },
    movemouse(event) {
      if (this.isDrag) {
        this.endX = event.clientX;
        this.endY = event.clientY;
        let disX = this.endX - this.startX;
        let disY = this.endY - this.startY;
        let neirong = document.querySelector(".neirong");
        neirong.style.left = neirong.offsetLeft + disX + "px";
        neirong.style.top = neirong.offsetTop + disY + "px";

        // 重置 startX 和 startY 以便下一次拖动从当前鼠标位置开始
        this.startX = this.endX;
        this.startY = this.endY;
      }
    },
    openList() {
      this.isListopen = !this.isListopen;
      this.isMinimized = false;
      this.isFullscreen = false;
    },
    small() {
      this.isMinimized = !this.isMinimized; // 切换最小化状态
    },
    big() {
      this.isFullscreen = !this.isFullscreen;
      if (this.isFullscreen) {
        this.isMinimized = false; // 如果是全屏状态，不能是最小化状态
      } // 切换全屏状态
    },
    close() {
      this.isListopen = false;
      this.isFullscreen = false;
    },
    startResize(direction, event) {
      this.isResizing = true;
      this.resizeDirection = direction;
      this.startX = event.clientX;
      this.startY = event.clientY;
      this.initialWidth = document.querySelector(".neirong").offsetWidth;
      this.initialHeight = document.querySelector(".neirong").offsetHeight;
    },
    resize(event) {
      if (this.isResizing) {
        const neirong = document.querySelector(".neirong");
        const bord = document.querySelector(".bord");
        const title = document.querySelector(".title");
        const deltaX = event.clientX - this.startX;
        const deltaY = event.clientY - this.startY;

        if (this.resizeDirection === "right") {
          const newWidth = this.initialWidth + deltaX;
          neirong.style.width = `${newWidth}px`;
          bord.style.width = `${newWidth}px`;
          title.style.width = `${newWidth}px`; // 同步 title 宽度
        } else if (this.resizeDirection === "left") {
          const newWidth = this.initialWidth - deltaX;
          neirong.style.width = `${newWidth}px`;
          bord.style.width = `${newWidth}px`;
          title.style.width = `${newWidth}px`; // 同步 title 宽度
          neirong.style.left = `${neirong.offsetLeft + deltaX}px`;
        } else if (this.resizeDirection === "bottom") {
          const newHeight = this.initialHeight + deltaY;
          neirong.style.height = `${newHeight}px`;
          bord.style.height = `${newHeight}px`;
        } else if (this.resizeDirection === "top") {
          const newHeight = this.initialHeight - deltaY;
          neirong.style.height = `${newHeight}px`;
          bord.style.height = `${newHeight}px`;
          neirong.style.top = `${neirong.offsetTop + deltaY}px`;
        }
      }
    },
    stopResize() {
      this.isResizing = false;
      this.resizeDirection = "";
      this.initialWidth = document.querySelector(".neirong").offsetWidth;
      this.initialHeight = document.querySelector(".neirong").offsetHeight;
    },
  },
  mounted() {
    document.addEventListener("mousemove", this.movemouse);
    document.addEventListener("mouseup", this.upmouse);
  },
  beforeDestroy() {
    document.removeEventListener("mousemove", this.movemouse);
    document.removeEventListener("mouseup", this.upmouse);
  },
};
</script>

<style scoped lang="scss">
.container {
  margin: 0;
  height: 100vh;
  position: relative;
}
.dianji {
  width: 250px;
  height: 30px;
  color: #fff;
  font-size: 15px;
  background: blanchedalmond;
  position: absolute;
  border: none;
  left: 2%;
  top: 10%;
}

.title {
  width: 350px;
  height: 30px;
  border: 1px solid #000;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.neirong {
  width: 350px;
  height: 530px;
  position: absolute;
  left: 5%;
  top: 15%;
  border: none;
}

.tu {
  width: 170px;
  height: 30px;
  display: flex;
  justify-content: right;
  align-items: center;
}

.tu1 {
  width: 30px;
  height: 30px;
  background-image: url("../assets/images/dialog/icon.png");
}

.tu2 {
  width: 30px;
  height: 30px;
  background-image: url("../assets/images/button/minus.png");
  background-size: cover;
  margin: 5px;
}
.tu3 {
  width: 30px;
  height: 30px;
  background-image: url("../assets/images/button/fullscreen-expand.png");
  background-size: cover;
  color: #fff;
  margin: 5px;
  cursor: pointer;
}
.tu4 {
  width: 30px;
  height: 30px;
  background-image: url("../assets/images/button/close.png");
  background-size: cover;
  margin: 5px;
}

.bord {
  width: 350px;
  // height: 530px;
  border: 1px solid #000;
  position: absolute;
  // left: 2%;
  // top: 18.4%;
  background: rgb(200, 180, 170, 0.25);
  &.fullscreen {
    width: 100%;
    height: 100%;
  }
}

.line {
  position: absolute;
  // background-color: #ccc;
  z-index: 10;
}
.line-right {
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: ew-resize;
}
.line-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  cursor: ns-resize;
}
.line-left {
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: ew-resize;
}
.line-top {
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  cursor: ns-resize;
}

.jiaobiao1 {
  position: absolute;
  left: 0;
  top: -10px;
}
.jiaobiao2 {
  position: absolute;
  right: -1px;
  top: -10px;
}
.jiaobiao3 {
  position: absolute;
  left: 0;
  bottom: -7px;
  transition: all 0.3s;
}
.jiaobiao4 {
  position: absolute;
  right: 0;
  bottom: -7px;
  transition: all 0.3s;
}
</style>
